<!--
 * @Date: 2024-02-27 16:01:53
 * @Auth: 873768511@qq.com
 * @LastEditors: 873768511@qq.com
 * @LastEditTime: 2024-02-28 16:48:30
 * @FilePath: \ztc-web\src\views\overview\components\rightLine.vue
-->
<template>
  <div class="content">
		<select
				class="radio-group"
				v-model="type"
				@change="handleChange"
			>
				<option style="background-color: #d7e7f4;color:#333;" value="" label="全部类型"></option>
				<option style="background-color: #d7e7f4;color:#333;" v-for="item in event_typeid" :value="item.value" :label="item.label"></option>
			</select>
    <div id="rightLine" class="chart"></div>
  </div>

</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getAlarmTrend } from "@/api/screen"
const type = ref('')
const { proxy } = getCurrentInstance();
const { event_typeid } = proxy.useDict("event_typeid");
const data = ref([])
function handleChange () {
	data.value = []
	getAlarmTrend({ eventType: type.value }).then(res => {
		if (res.data.length > 0) {
			data.value = res.data.map(item => {
				return ({
					name: item.label,
					value: item.num
				})
			})
		}
		console.log(data.value,'?')
    init()
  })
}
function init () {
  let myChart = echarts.init(document.getElementById('rightLine'), null, {
    renderer:"svg",
  })
  myChart.setOption({
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(11, 53, 100, 0.00)' },
			{ offset: 1, color: 'rgba(11, 53, 100, 1.00)' }
		]),
		grid: {
			left: '5%',
			right: '10%',
			top:'20%',
			bottom: '15%',
			containLabel: true
		},
		tooltip : {
			show: true,
			trigger: 'item'
		},
		legend: {
			show:false
		},
		xAxis : [
			{
				type : 'category',
				boundaryGap : false,
				axisLabel:{
					color: '#d7e7f4'
				},
				axisLine:{
						show:true,
						lineStyle:{
						color:'#397cbc'
					}
				},
					axisTick:{
						show:false,
					},
					splitLine:{
						show:false,
						lineStyle:{
							color:'#195384'
						}
					},
					data : data.value
	    	}
	    ],
	    yAxis : [
			{
				type : 'value',
				minInterval:1,
				axisLabel : {
					formatter: '{value}',
					color:'#2ad1d2'
				},
				axisLine:{
					lineStyle:{
						color:'#27b4c2'
					}
				},
				axisTick:{
					show:false,
				},
				splitLine:{
					show:true,
					lineStyle:{
						color:'#11366e'
					}
				}
			}
		],
		series : [
			{
				type:'line',
				symbol:'circle',
				symbolSize: 8,
				itemStyle: {
					color:'#0092f6',
				},
				lineStyle: {
					color: "#0092f6",
					width:1
				},
				// areaStyle: {
				// 	color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
				// 		offset: 0,
				// 		color: 'rgba(7,44,90,0.3)'
				// 	}, {
				// 		offset: 1,
				// 		color: 'rgba(0,146,246,0.9)'
				// 	}]),
				// },
				data:data.value
			}
    ]
  })
}
onMounted(() => {
  handleChange()
})
</script>

<style lanf="scss" scoped>
.content{
  height: calc(100% - 40px);
  width: 100%;
  position: relative;
}
.radio-group{
	width: 90px;
	background-color: #1275ca;
	border-radius: 4px;
	height: 27px;
	color: #d7e7f4;
	cursor:pointer;
 position: absolute;
 right: 30px;
 top: 20px;
 z-index: 2;
}
.chart{
  height: 100%;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
}
</style>